<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来用，不能当做方法调用，不能加小括号， -->
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <p>{{fulName}}</p>
    <p>{{fulName}}</p>
    <p>{{fulName}}</p>

    <h2>使用方法</h2>
    <!-- 调用方法会多次调用 -->
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing:'李',
      ming:'四'
    }
  },
  //计算属性要写到和data 平级的computed 中
  computed: {
    //所有的计算属性都放这里,【计算属性，必须放回计算的结构】
    fulName() {
      console.log('使用属性');
      return this.xing + this.ming
    }
  },
  methods: {
    getName() {
      console.log('调用方法');
      return this.xing + this.ming
    }
  }
}
</script>

<style>

</style>